<template>
  <!-- 主页 -->
  <div class="box">
    <div class="head">
      <div class="head-nav">
        <van-icon
          name="arrow-left"
          style="
            background-color: #2e2b2c;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            line-height: 2.5rem;
            text-align: center;
          "
         @click="router.go(-1)"/>
        <span>详情</span>
        <van-icon style="transform: rotate(90deg)" name="ellipsis" />
      </div>
    </div>
    <div class="main">
      <div
        style="
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 1rem 0;
        "
      >
        <p style="font-size: 25px">{{ data.name }}</p>
        <p
          v-if="info.staus == 1"
          style="
            color: #54cec6;
            background-color: #effefa;
            width: 2.5rem;
            height: 2rem;
            border-radius: 8px;
            line-height: 2rem;
            text-align: center;
            cursor: pointer;
          "
          @click="toxiang"
        >
          查看
        </p>
        <p
          v-else
          style="
            color: #b21675;
            width: 2.5rem;
            height: 2rem;
            background-color: #fce8ec;
            line-height: 2rem;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
          "
        >
          关店
        </p>
      </div>
      <p>
        <van-icon
          name="location"
          style="color: #ffb900"
        />&nbsp;&nbsp;&nbsp;&nbsp;{{ data.postton }}
      </p>
      <br />
      <p style="color: #ffb900">
        <van-icon
          name="star"
          style="color: #ffb900"
        />&nbsp;&nbsp;&nbsp;&nbsp;{{ data.pj }} 433条评
      </p>
      <div class="main_center">
        <div @click="router.push('/message')">
          <van-icon class="main_icon" name="comment-o" />
          <span >信息</span>
        </div>
        <div @click="router.push('/message')">
          <van-icon class="main_icon" name="phone-o" />
          <span>联系人</span>
        </div>
        <div>
          <van-icon class="main_icon" name="location-o" @click="router.push({
            path: '/map',
            query: {
              data:JSON.stringify(data.jwd)
            }
          })"/>
          <span>定位</span>
        </div>
        <div @click="showShare = true">
          <van-icon class="main_icon" name="share-o" />
          <span>分享</span>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 2rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 15px 0;
        "
      >
        <p style="font-size: 1.5rem">我们的发型师</p>
        <p
          style="color: #ffb900; font-size: 1.1rem"
          @click="
            router.push({
              path: '/faxingshi',
              query: { falist: JSON.stringify(getmendian) },
            })
          "
        >
          查看全部
        </p>
      </div>
      <!-- 发型师 -->
      <div
        style="
          display: flex;
          width: 100%;
          height: 10rem;
          justify-content: space-around;
          align-items: center;
          margin: 20px 0;
        "
      >
        <div v-for="(i, idx) in getmendian.slice(0, 3)" :key="idx">
          <img style="width: 4rem; height: 4rem" :src="i.photoUrl" alt="" />
          <p style="text-align: center">{{ i.name }}</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button @click="router.push('/shopfrontabout/taocan')">现在预定</button>
    </div>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, onMounted, computed, toRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import { showToast } from 'vant';
axios.defaults.baseURL = "http://localhost:3000";
const route = useRoute()


const data = JSON.parse(route.query.data)
console.log('====================================');
console.log(data);
console.log('====================================');
const showShare = ref(false); //分享
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};

const router = useRouter();
const toxiang = () => {
  let obj = JSON.stringify(info.value);
  localStorage.setItem("shopInfo", obj);
  router.push({ path: "/shopfrontabout/guanyu" });
};
onMounted(() => {
  getshop();
  gethairsty();
});
let info = ref(JSON.parse(localStorage.getItem("shopInfo")) || {}); //单个门店信息
let hairstylist = ref([]); //单个门店发型师信息
//获取门店
const getshop = async () => {
  try {
    let {
      data: { data },
    } = await axios.get("/shopfront/getsalon");
    localStorage.setItem("shopInfo", JSON.stringify(data[0]));
  } catch (error) {
    console.log(error);
  }
};
//获取发型师
const gethairsty = async () => {
  try {
    let {
      data: { data },
    } = await axios.get("/shopfront/getstylist");
    hairstylist.value = data;
  } catch (error) {
    console.log(error);
  }
};
const getmendian = computed(() => {
  return hairstylist.value.filter((i) => {
    if (i?.salonId?._id == info.value._id) {
      return i;
    }
  });
});
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #595555;
  position: relative;
  overflow-y: scroll;
  box-sizing: border-box;
}

.box::-webkit-scrollbar {
  display: none;
}

.head {
  width: 100%;
  height: 40%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("/1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.head-nav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.5rem;
  position: relative;
  top: 1rem;
}

.head-nav .head-nav-left {
  display: flex;
  align-items: center;
}

.head-nav .head-nav-left .head-nav-left-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.head-nav .head-nav-left .head-nav-left-img img {
  width: 100%;
  height: 100%;
}

.head-nav .head-nav-left .head-nav-left-text {
  margin-left: 10px;
}

.main {
  width: 100%;
  min-height: 75%;
  background-color: #fff;
  position: absolute;
  top: 35%;
  z-index: 2;
  border-radius: 5% 0 5% 5%;
  padding: 15px 10px;
  box-sizing: border-box;
}

.main .main_center {
  width: 100%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 15px 0;
}

.main .main_center div {
  width: 20%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}

.main .main_center div .main_icon {
  background-color: #fff8e6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65%;
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffb900;
}

.main .main_center div span {
  font-size: 0.8rem;
  color: #999;
}

.bottom {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  background-color: #fff;
  align-items: center;
  z-index: 3;
}

.bottom button {
  width: 80%;
  height: 85%;
  background-color: #ffb900;
  color: #fff;
  border: none;
  border-radius: 10px;
}
</style>